<template>
  <div>
    <div id="平滑曲线图" class="echarts"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "@vue/runtime-core";
import * as echarts from "echarts";

onMounted(() => {
  // 基于准备好的dom，初始化echarts实例
  let e = document.getElementById("平滑曲线图");
  if (e === null) {
    throw new Error("Element not found");
  }
  var myChart = echarts.init(e);
  // 绘制图表
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},

    // x坐标配置, https://echarts.apache.org/handbook/zh/concepts/axis
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },

    // y坐标配置, https://echarts.apache.org/handbook/zh/concepts/axis
    yAxis: {},

    // 数据集, 关于此字段的描述: https://echarts.apache.org/handbook/zh/concepts/dataset
    series: [
      {
        name: "销量",
        type: "line",
        data: [5, 20, 36, 10, 10, 20],
        // 启用平滑
        smooth: true,
      },
      {
        name: "流水",
        type: "line",
        data: [11, 34, 43, 21, 42, 62], 
      },
    ],
  });
});
</script>




<style scoped>
.echarts {
  height: 300px;
  width: 600px;
}
</style>
